<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <form action="" method="post" enctype="application/x-www-form-urlencoded">
			
			<input type="submit" value=""/>
		</form>
		 -->
    姓名：<input type="text" class="username" id="" value="" /><br />
    年龄：<input type="text" class="age" /><br />
    <button>点击发送post的ajax</button>

    <script>
      // post 的区别 1.open的方式是 post  2. 发送数据通过send发送；(格式：name=zhangsan&age=20) 3.需要设置post请求头的格式；

      // 客户端    ----- 1.数据 2.请求头（request header） ---->            服务端
      // 服务端----  1.数据 2.返还头（response header）------> 客户端
      var btn = document.querySelector("button");
      var userEle = document.querySelector(".username");
      var ageEle = document.querySelector(".age");
      btn.onclick = function () {
        var username = userEle.value;
        var age = ageEle.value;
        let xhr = new XMLHttpRequest();
        xhr.open("POST", "post.php");
        xhr.setRequestHeader(
          "content-type",
          "application/x-www-form-urlencoded"
        );
        xhr.onload = function () {
          // console.log(xhr.responseText);  //服务端返还给客户端；
          console.log(JSON.parse(xhr.responseText));
        };
        var data = `username=${username}&age=${age}`;
        xhr.send(data);
      };
    </script>
  </body>
</html>
